<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport"
        content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

    <!--<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">-->

    <!-- 固定的css 和 common.js 的引用    -->
    <link rel="stylesheet" href="http://47.104.254.28/commonfile/css/sm.min.css">
    <link rel="stylesheet" href="http://47.104.254.28/commonfile/css/sm-extend.min.css">
    <link rel="stylesheet" href="http://47.104.254.28/commonfile/css/common.css">
    <script type="text/javascript" src="http://47.104.254.28/commonfile/common/common/common.js"></script>

    <!-- <script type="text/javascript" src="http://47.104.254.28/commonfile/js/js/vconsole.min.js"></script>
		<script>
			var vConsole = new VConsole();
		</script> -->
    <!--banner-->

    <style type="text/css">
        /*css 的样式都放在这里*/

        .swiper-wrap {
            padding: 2.22rem 0.675rem 0;
            background: #fff;
        }

        /*banner图大小设置*/
        #index_banner {
            width: 100%;
            height: 7.57rem;
        }

        .table-box {
            box-sizing: border-box;
            padding: 1.36rem 0 0.6rem;
        }

        .table-flex {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 0 0.675rem;
        }

        .table-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .table-item img {
            display: block;
            margin-bottom: 0.275rem;
        }

        .table-text {
            font-size: 0.6rem;
            color: #1a1a1a;
        }

        /*table大小*/
        #table_size {
            /*border: solid 1px red;*/
            width: 100%;
            border: none;
            background-color: white;
        }

        #table_size tr td {
            /*height: 200px;*/
            border: none;
            text-align: center;
            align-self: center;
        }

        /*链接图标大小与位置*/
        #weizhi_left {
            width: 50%;
            align-self: center;
            text-align: center;
        }

        #weizhi_right {
            width: 50%;
            align-self: center;
            ;
            text-align: center;
        }

        #index_lianjie_left {
            height: 2.18rem;
            text-align: center;
            /*margin-left: 35% ;*/
        }

        #index_lianjie_right {
            /* height: 2.18rem; */
            height: 2.5rem;
            text-align: center;
            /*margin-left: 15% ;*/
        }

        #index_wenzi_right,
        #index_wenzi_left {
            font-size: 14px;
        }

        #cha {
            height: 20px;
        }

        .tool-box {
            box-sizing: border-box;
            display: flex;
            width: 100%;
            background: #fff;
            padding: 0 10px 10px;
        }

        .tool-item {
            flex: 1;
            height: 2.3rem;
            padding: 0 10px;
            background: #fff;
        }

        .tool {
            position: relative;
            width: 100%;
            height: 100%;
            background: url('http://47.104.254.28/commonfile/img/img/tool_1.png') no-repeat;
            background-size: contain;
            background-position: center center;
        }

        .tool .tool-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 14px;
            color: #fff;
            white-space: nowrap;
        }

        .tool-2 {
            background-image: url('http://47.104.254.28/commonfile/img/img/tool_2.png');
        }

        .tool-3 {
            background-image: url('http://47.104.254.28/commonfile/img/img/tool_3.png');
        }

        .item-content {
            padding-left: 1rem;
        }

        .list-block {
            margin: 0;
        }

        .list-block ul:before {
            display: none;
        }
        
        .list-block.media-list .item-inner {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            padding-right: 1rem;
            margin-left: 0.5rem !important;
        }

        .list-block.media-list .item-title {
            font-size: 16px;
            font-weight: 400;
            color: #1a1a1a;
        }

        .item-media img {
            width: 5rem;
            height: 3rem;
            object-fit: contain;
        }

        .list-block .item-text {
            height: 1rem;
            color: #1a1a1a;
        }

        .top-tip {
            position: absolute;
            top: 0;
            left: 0.59rem;
            background: #fff;
            border-radius: 0 0 0.2rem 0.2rem;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 3.18rem;
            height: 1.22rem;
            padding: 0 0.1rem;
            box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.2);
        }

        .top-tip span {
            font-size: 10px;
            color: #cb302b;
            font-weight: 500;
        }

        .top-right {
            position: absolute;
            top: 0;
            right: 0rem;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            height: 1.22rem;
            min-width: 3.18rem;
            padding: 0 0.3rem 0 0.5rem;
            line-height: 1;
            /* background: rgba(0, 0, 0, .5); */
            background: #2EC8F6;
            border-radius: 0.75rem 0 0 0.75rem;
        }
        
        .top-right .text {
            font-size: 0.55rem;
            color: #fff;
            font-weight: 500;
        }

        .top-right .text span {
            display: block;
        }

        .top-icon {
            width: 0.8rem;
            height: 0.8rem;
            margin-left: 0.25rem;
        }

        .top-icon img {
            display: block;
            width: 100%;
            height: 100%;
        }

        /* .clock-box {
            box-sizing: border;
            width: 100%;
            padding: 0.3rem 1rem 0.5rem;
            background: #fff;
        }

        .clock-box .clock {
            box-sizing: border-box;
            width: 100%;
            height: 1.8rem;
            line-height: 1.8rem;
            text-align: center;
            font-size: 14px;
            color: #fff;
            border-radius: 0.1rem;
            background: linear-gradient(to bottom, rgb(97, 73, 246), rgb(75, 176, 255));
        } */
        
    </style>


</head>

<body>
    <div class="page-group">
        <div class="page page-current">
            <!-- html代码内容区域 -->

            <!--banner
            作者：510203306@qq.com
            时间：2018-01-08
            描述：
        -->
            <div class="content">
                <!-- Slider -->
                <div class="swiper-wrap" style=" position: relative;">
                    <div class="swiper-container" data-autoplay="2000"
                    data-autoplay-disable-on-interaction=false style="height: 7.57rem; border-radius: 0.3rem;">
                    <div class="swiper-wrapper">

                        <!--banner图 插入位置
                        作者：510203306@qq.com
                        时间：2018-01-09
                        描述：
                    -->
                        <!--<div class="swiper-slide"><img id="index_banner" style="width:100%" src="http://mifeng.gonghuiren.com//uploads/images/bcban1.jpg" alt=""></div><div class="swiper-slide"><img id="index_banner" style="width:100%" src="http://mifeng.gonghuiren.com//uploads/images/bcban2.jpg" alt=""></div><div class="swiper-slide"><img id="index_banner" style="width:100%" src="http://mifeng.gonghuiren.com//uploads/images/bcban3.jpg" alt=""></div>-->
                    </div>
                   
                </div>
                <div class="top-tip">
                    <span>三三小蜜蜂</span>
                </div>
                <div id="setSubject" class="top-right" onclick="goSubjectList()">
                    <div class="text"></div>
                    <div class="top-icon">
                        <img src="http://47.104.254.28/commonfile/img/img/down.png" alt="">
                    </div>
                </div>
                    <!--<div class="swiper-pagination"></div>-->
                </div>



                <div class="table-box" style="background-color: white">
                    <div class="table-flex">
                        <div class="table-item" onclick="menu_click2()">
                            <img id="index_lianjie_right" src="http://47.104.254.28/commonfile/img/img/icon/index-1.png" />
                            <div class="table-text">核心考点</div>
                        </div>

                        <div class="table-item" onclick="menu_click1()">
                            <img id="index_lianjie_right" src="http://47.104.254.28/commonfile/img/img/icon/index-2.png" />
                            <div class="table-text">记忆宝典</div>
                        </div>

                        <!-- <div class="table-item" onclick="menu_click3()">
                            <img id="index_lianjie_right" src="http://47.104.254.28/commonfile/img/img/img_gaofentiku.png" />
                            <div class="text">高分题库</div>
                        </div> -->
                        <div class="table-item" onclick="menu_click4()">
                            <img id="index_lianjie_right" src="http://47.104.254.28/commonfile/img/img/icon/index-3.png" />
                            <div class="table-text">押题密卷</div>
                        </div>

                        <div class="table-item" onclick="menu_click5()">
                            <img id="index_lianjie_right" src="http://47.104.254.28/commonfile/img/img/icon/index-4.png" />
                            <div class="table-text">直播课堂</div>
                        </div>

                        <div class="table-item" onclick="menu_click3()">
                            <img id="index_lianjie_right" src="http://47.104.254.28/commonfile/img/img/icon/index-5.png" />
                            <div class="table-text">高分题库</div>
                        </div>
                        <!-- <div class="table-item" onclick="menu_click6()">
                            <img id="index_lianjie_right" src="http://47.104.254.28/commonfile/img/img/img_tushushangcheng.png" />
                            <div class="table-text">图书商城</div>
                        </div> -->
                    </div>
                </div>

                <!-- <div class="table-box" style="background-color: white">
                    
                    <table id="table_size" border="" cellspacing="" cellpadding="">
                        <tr>
                            <td onclick="menu_click2()">
                                <span id="weizhi_right">
                                    <img id="index_lianjie_right"
                                        src="http://47.104.254.28/commonfile/img/img/img_hexinkaodian.png" />
                                    <br />
                                    <span id="index_wenzi_right">
                                        核心考点
                                    </span>
                                    <div id="cha">

                                    </div>
                                </span>

                            </td>
                            <td onclick="menu_click1()">
                                <span id="weizhi_left">
                                    <img id="index_lianjie_left"
                                        src="http://47.104.254.28/commonfile/img/img/img_jiyibaodian.png" />
                                    <br />
                                    <span id="index_wenzi_left">
                                        记忆宝典
                                    </span>
                                    <div id="cha">

                                    </div>
                                </span>

                            </td>

                           <td onclick="menu_click3()">
                                <span id="weizhi_left">
                                    <img id="index_lianjie_left"
                                        src="http://47.104.254.28/commonfile/img/img/img_gaofentiku.png" />
                                    <br />
                                    <span id="index_wenzi_left">
                                        高分题库
                                    </span>
                                    <div id="cha">

                                    </div>
                                </span>

                            </td>
                            <td onclick="menu_click4()">
                                <span id="weizhi_right">
                                    <img id="index_lianjie_right"
                                        src="http://47.104.254.28/commonfile/img/img/img_yatimijuan.png" />
                                    <br />
                                    <span id="index_wenzi_right">
                                        押题密卷
                                    </span>
                                    <div id="cha">

                                    </div>
                                </span>
                            </td>
                            <td onclick="menu_click5()">
                                <span id="weizhi_left">
                                    <img id="index_lianjie_left"
                                        src="http://47.104.254.28/commonfile/img/img/img_zhiboketang.png" />
                                    <br />
                                    <span id="index_wenzi_left">
                                        直播课堂
                                    </span>
                                    <div id="cha">

                                    </div>
                                </span>
                            </td>
                            <td onclick="menu_click6()">
                                <span id="weizhi_right">
                                    <img id="index_lianjie_right"
                                        src="http://47.104.254.28/commonfile/img/img/img_tushushangcheng.png" />
                                    <br />
                                    <span id="index_wenzi_right">
                                        图书商城
                                    </span>
                                    <div id="cha">

                                    </div>
                                </span>
                            </td>
                        </tr>
                    </table>
                </div> -->

                <div class="tool-box">
                    <div class="tool-item">
                        <div id="kaoshixinxi" class="tool">
                            <div class="tool-text">考试信息</div>
                        </div>
                    </div>
                    <div class="tool-item">
                        <div id="xuexijihua" class="tool tool-2">
                            <div class="tool-text">学习技能</div>
                        </div>
                    </div>
                    <div class="tool-item">
                        <div id="huiyuanzhongxin" class="tool tool-3">
                            <div class="tool-text">会员中心</div>
                        </div>
                    </div>
                </div>

                <!-- <div class="clock-box">
                    <div class="clock" onclick="menu_click6()">
                        <span>打卡</span>
                    </div>
                </div> -->

                <div class="list-block media-list">
                    <ul id="article-list"></ul>
                  </div>

            </div>

            <!--页面搭建
            作者：510203306@qq.com
            时间：2018-01-08
            描述：
        -->
        </div>
    </div>





    <!-- 固定的js引用，所有的jQuery 要用 $$ 表示 -->
    <script type="text/javascript" src="http://47.104.254.28/commonfile/js/js/jquery-1.11.1.min.js"></script>
    <!-- 这一行代码是为了 避免js冲突 -->
    <script type="text/javascript">var $$ = jQuery.noConflict();</script>
    <script type='text/javascript' src='http://47.104.254.28/commonfile/zepto/zepto/zepto.min.js'
        charset='utf-8'></script>
    <script type='text/javascript' src='http://47.104.254.28/commonfile/js/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://47.104.254.28/commonfile/js/js/sm-extend.min.js'
        charset='utf-8'></script>


    <script type="text/javascript">
        // 函数区域，函数放在“初始化区域的上面”
        //一般app 初始化 html 传参数，函数名固定
        //function getParams(data){
        //  // data需要转成json调用 ，函数urlParamParseJson();
        //  var parms = urlParamParseJson(data);
        //  //网络请求框架，需要传入成功函数回调和 失败函数回调
        //  net_request('get','api/v1/banners',params,successCallBack,errorCallBack);
        //}

        //成功的回调函数
        function successCallBack(data) {
            // isNotNull() 用来判断字段不为空
            if (isNotNull(data)) {
                //        console.log(data);
                if (data.success == true) {
                    //        console.log(data);
                    var curval = data.data;
                    // isNotNull() 用来判断字段不为空
                    if (isNotNull(curval)) {
                        var banner_tu = "";
                        var banner_shuzu = new Array();
                        for (var i = 0; i < curval.length; i++) {
                            banner_shuzu[i] = '<div class="swiper-slide"><img id="index_banner" style="width:100%;height:7.57rem;" src="' + curval[i].img + '"></div>';
                            banner_tu = banner_tu + banner_shuzu[i];
                        }
                        $$(".swiper-wrapper").html(banner_tu);
                        $.reinitSwiper();
                    }
                }
            }
        }
        // 失败的回调函数
        function errorCallBack(data) {
            console.log(data);
        }

        function articleSuccessCallBack(data) {
            if (isNotNull(data)) {
                //        console.log(data);
                if (data.success == true) {
                    //        console.log(data);
                    var curval = data.data;
                    // isNotNull() 用来判断字段不为空
                    if (isNotNull(curval)) {
                        let liHtml = ''
                        for (let val of curval) {
                            liHtml += `<li class="artice_li" data-id="${val.id}">
                                        <div class="item-content">
                                        <div class="item-media"><img src="${val.img ? val.img : 'http://47.104.254.28/commonfile/img/img/article_null.jpg'}"></div>
                                        <div class="item-inner">
                                            <div class="item-title-row">
                                            <div class="item-title">${val.title}</div>
                                            </div>
                                            <div class="item-text">${val.created_at}</div>
                                        </div>
                                        </div>
                                    </li>`
                        }
                       $$('#article-list').html(liHtml);

                       $('.artice_li').on('click', function() {
                           goInfo($(this).data('id'))
                       })
                    }
                }
            }
        }

        function articleErrorCallBack(data) {
            console.log(data)
        }
        // 初始化区域
        $$(function () {
            var params = {
                position: 'main'
            };
            net_request('get', 'api/v1/banners', params, successCallBack, errorCallBack);

            net_request('get', 'api/v1/articles', {
                offset: 0,
                limit: 3,
                postion: ""
            }, articleSuccessCallBack, articleErrorCallBack);


            // 跳转本地页面、前面要加上local关键字
            //native_goto('local/xx');

            $.init();
        });

        function goInfo(id) {
            native_goto('local/webview?url=http://www.33xiaomifeng.com/api/v1/showarticle/' + id);
        }

        //记忆宝典
        function menu_click1() {
            native_goto('local/tab1_jiyibaodian');
        }

        //核心考点
        function menu_click2() {
            native_goto('local/tab1_hexinkaodian');
        }

        //高分题库
        function menu_click3() {
            native_goto('local/tab1_gaofentiku');
        }

        //押题密卷
        function menu_click4() {
            native_goto('local/tab1_yatimijuan');
        }

        //直播课堂
        function menu_click5() {
            native_goto('local/tab1_zhiboketang');
        }

        //图书商城
        function menu_click6() {
            native_goto('local/tab1_tushushangcheng');
        }

        // 设置学科
        function goSubjectList() {
            let key = $$('#setSubject span').data('key');
            let value = $$('#setSubject span').data('value');
            native_goto(`local/subjectList?book_type=${key}&book_value=${value}`);
            // var values = {
            //     type:"intoSetType"
            // }
            // //发送value到本地,通知本地开始倒计时
            // send_data(values);
        }
        
        function setBookValue(data) {
            console.log(data)
            let params = urlParamParseJson(data);
            console.log(params)
            if (isNotNull(params.book_type) && isNotNull(params.book_value) && isNotNull(params.index_value)) {
                let value = decodeURIComponent(params.book_value);
                let index_value = decodeURIComponent(params.index_value);
                let html = `<span data-key="${params.book_type}" data-value="${value}">${index_value}</span>`;
                $$('#setSubject .text').html(html);
            } else {
                $$('#setSubject .text').html('<span>设置学科</span>');
            }
        }
        setBookValue();

        // 首页 考试信息跳转：local/tab1_kaoshixinxi
        $$('#kaoshixinxi').click(function() {
            native_goto('local/tab1_kaoshixinxi');
        })
        // 首页 学习技能跳转：local/tab1_xuexijineng
        $$('#xuexijihua').click(function() {
            native_goto('local/tab1_xuexijineng');
        })
        // 首页 会员中心跳转：local/tab1_huiyuanzhongxin
        $$('#huiyuanzhongxin').click(function() {
            native_goto('local/tab1_huiyuanzhongxin');
        })

    </script>
</body>

</html>